import { Col, Row, Select, DatePicker, Input, Button } from 'antd';
import React from 'react';
import AuthorizedButton from '@/components/AuthorizedButton';
import moment from 'moment';
import _ from 'lodash';

const ScreenDom = props => (
  <Row type="flex" justify="end" gutter={[10, 0]} style={{ marginBottom: '10px' }}>
    <Col>
      <span>版本状态: &nbsp;</span>
      <Select
        allowClear
        placeholder="请选择版本状态"
        style={{ width: '124px' }}
        onChange={value => props.onChangeParams('versionStatus', value)}
      >
        <Select.Option value="not_create">未编制</Select.Option>
        <Select.Option value="not_prepared">待编制</Select.Option>
        <Select.Option value="organization">编制中</Select.Option>
        <Select.Option value="examined_approved">待提交审批</Select.Option>
        <Select.Option value="approved">审批中</Select.Option>
        <Select.Option value="failure_approved">审批已驳回</Select.Option>
        <Select.Option value="success_approved">审批通过</Select.Option>
        <Select.Option value="sys_generation">系统生成</Select.Option>
      </Select>
    </Col>
    <Col>
      <span>审批时间：&nbsp;</span>
      <DatePicker.RangePicker
        showTime={{ format: 'HH:mm:ss' }}
        format="YYYY-MM-DD HH:mm:ss"
        placeholder={['开始时间', '结束时间']}
        style={{ width: '300px' }}
        onChange={value => {
          if (_.isEmpty(value)) {
            props.onChangeParams('time', value);
          }
        }}
        onOk={value => props.onChangeParams('time', value)}
        disabledDate={current => current && current > moment().endOf('day')}
      />
    </Col>
    <Col>
      <Input.Search
        placeholder="请输入区域/城市公司/项目搜索"
        style={{ width: '200px' }}
        onSearch={value => props.onChangeParams('name', value)}
      />
    </Col>
    <Col>
      <AuthorizedButton authority={props.exportBtnAuthorized}>
        <Button onClick={props.clickHandlerRefresh}>刷新</Button>
      </AuthorizedButton>
    </Col>
  </Row>
);

export default ScreenDom;
